<template>
  <div class="wrap-container">
    <div class="flex">
      <div class="member_l">
        <div class="manage_tit">
          <div class="line"></div>
          <p>会员基本信息</p>
        </div>
        <div class="member_cont">
          <div class="user_head">
            <img src="@/assets/images/head_img.png" />
            <p>运动美少女</p>
          </div>
          <div class="user_info">
            <div>
              <p>姓名：</p>
              <p>李建刚</p>
            </div>
            <div>
              <p>性别：</p>
              <p>女</p>
            </div>
            <div>
              <p>会员ID：</p>
              <p>女</p>
            </div>
            <div>
              <p>手机号：</p>
              <p>女</p>
            </div>
            <div>
              <p>身份证号：</p>
              <p>女</p>
            </div>
            <div>
              <p>来源渠道：</p>
              <p>女</p>
            </div>
            <div>
              <p>注册时间：</p>
              <p>女</p>
            </div>
            <div class="line"></div>
            <div>
              <p>会员等级：</p>
              <p>女</p>
            </div>
            <div>
              <p>会员折扣：</p>
              <p>女</p>
            </div>
            <div>
              <p>上级推荐人：</p>
              <p>女</p>
            </div>
            <div>
              <p>邀请人数：</p>
              <p>女</p>
            </div>
            <div>
              <p>会员状态：</p>
              <p>女</p>
            </div>
            <div>
              <p>会员生日：</p>
              <p>女</p>
            </div>
            <div>
              <p>最近访问时间：</p>
              <p>女</p>
            </div>
            <div>
              <p>平台备注：</p>
              <p>女</p>
            </div>
          </div>
        </div>
      </div>
      <div class="member_r">
        <div class="member_top">
          <div class="manage_tit">
            <div class="line"></div>
            <p>会员资产</p>
          </div>
          <el-row :gutter="26">
            <el-col :span="6">
              <div class="col_item">
                <div class="col_l">
                  <p>余额</p>
                  <p>2000</p>
                </div>
                <div class="col_r">余额变更</div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="col_item">
                <div class="col_l">
                  <p>积分</p>
                  <p>500</p>
                </div>
                <div class="col_r">积分变更</div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="col_item">
                <div class="col_l">
                  <p>优惠券</p>
                  <p>2</p>
                </div>
                <div class="col_r">发放优惠券</div>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="member_table">
          <div class="tabs_box">
            <el-tabs v-model="tabsVal" @tab-click="handleClick">
              <el-tab-pane
                :label="`${item.label}`"
                :name="item.value"
                v-for="item in tabsList"
                :key="item.value"
              >
                <template v-slot:label>
                  <span>
                    {{ item.label }}
                  </span>
                </template>
              </el-tab-pane>
            </el-tabs>
          </div>
          <div class="search">
            <el-form :inline="true" label-position="left" label-width="76px">
              <el-form-item>
                <el-input
                  clearable
                  v-model="queryParams.stadiumName"
                  placeholder="订单号"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-select
                  filterable
                  v-model="queryParams.stadiumType"
                  placeholder="支付方式"
                  clearable
                >
                  <el-option
                    :label="item.dictLabel"
                    :value="item.dictValue"
                    v-for="item in dictTypeList"
                    :key="item.dictValue"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-date-picker
                  v-model="queryParams.date"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="handleQuery">查询</el-button>
                <el-button @click="reset">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
          <el-table v-loading="loading" :data="tableData">
            <el-table-column label="订单号" prop="id" width="180" />
            <el-table-column label="使用场馆" prop="enterpriseName" show-overflow-tooltip />
            <el-table-column label="订单金额" prop="stadiumTypeName" width="120" />
            <el-table-column label="优惠券类型" prop="address" />
            <el-table-column label="实收金额" prop="contactPerson" width="120" />
            <el-table-column label="支付方式" prop="contactPhone" width="120" />
            <el-table-column label="交易时间" prop="createTime" width="150" />
            <el-table-column label="操作" width="96">
              <template #default="{ row }">
                <div class="table_btn">
                  <el-button class="primary_text" type="text" @click="handleDetail(row.id)"
                    >详情</el-button
                  >
                </div>
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="total > 0"
            :total="total"
            v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize"
            @pagination="getList"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'

interface TabItem {
  label: string
  value: number
}

interface QueryParams {
  stadiumName?: string
  stadiumType?: string
  date?: string[]
  pageNum?: number
  pageSize?: number
}

interface DictType {
  dictLabel: string
  dictValue: string
}

interface TableItem {
  id: string
  enterpriseName: string
  stadiumTypeName: string
  address: string
  contactPerson: string
  contactPhone: string
  createTime: string
}

const tabsList = ref<TabItem[]>([
  { label: '平台订单', value: 1 },
  { label: '积分明细', value: 2 },
  { label: '余额明细', value: 3 },
  { label: '充值记录', value: 4 },
  { label: '优惠券记录', value: 5 },
  { label: '登记变更记录', value: 6 },
  { label: '推广会员', value: 7 },
])

const tabsVal = ref<number>(1)
const total = ref<number>(0)
const loading = ref<boolean>(false)
const dictTypeList = ref<DictType[]>([])
const tableData = ref<TableItem[]>([])

const queryParams = reactive<QueryParams>({
  pageNum: 1,
  pageSize: 10,
})

// Methods
const handleQuery = () => {}

const reset = () => {}
const getList = () => {}

const handleClick = () => {}

const handleDetail = (id: string) => {}
</script>

<style lang="scss" scoped>
.wrap-container {
  .member_l {
    width: 424px;
    background: #fff;
    padding: 18px 12px;
    .user_head {
      text-align: center;
      margin-top: 30px;
      p {
        font-size: 18px;
        color: #383838;
        line-height: 27px;
      }
    }
    .user_info {
      margin-top: 25px;
      div {
        display: flex;
        font-size: 14px;
        color: #808080;
        line-height: 21px;
        margin-bottom: 16px;
        p {
          &:first-child {
            width: 130px;
            margin-left: 15px;
          }
        }
      }
      .line {
        border-top: 1px solid #a6a6a6;
      }
    }
  }
  .member_r {
    flex: 1;
    margin-left: 11px;
    .member_top {
      padding: 18px 12px 22px;
      background: #fff;
      .manage_tit {
        padding-bottom: 11px;
        border-bottom: 1px solid #e5e5e5;
      }
      .el-row {
        padding: 0 13px;
        margin-top: 29px;
        .col_item {
          background: #d9ecff;
          border-radius: 6px;
          padding: 0 25px 26px 20px;
          display: flex;
          justify-content: space-between;
          height: 123px;
          box-sizing: border-box;
          .col_l {
            p {
              color: #383838;
              &:first-child {
                font-size: 16px;
                line-height: 24px;
                margin-top: 29px;
              }
              &:last-child {
                font-size: 30px;
                font-weight: 700;
                line-height: 36px;
                margin-top: 8px;
              }
            }
          }
          .col_r {
            font-size: 14px;
            color: #0988fb;
            line-height: 21px;
            margin-top: 76px;
          }
        }
      }
    }
    .member_table {
      background: #fff;
      padding: 0 26px;
      margin-top: 11px;
      .search {
        :deep(.el-form-item) {
          margin-bottom: 16px;
          .el-input__inner {
            height: 30px;
            line-height: 30px;
          }
          .el-range-editor--medium .el-range__icon,
          .el-range-editor--medium .el-range__close-icon {
            line-height: 23px;
          }
          .el-range-separator {
            line-height: 23px;
          }
          .el-button {
            width: 75px;
            height: 29px;
            line-height: 29px;
            border-radius: 6px;
            padding: 0;
          }
        }
      }
      :deep(.tabs_box) {
        .el-tabs .el-tabs__item {
          height: 63px;
          line-height: 63px;
          margin: 0 53px;
          &:nth-child(2) {
            margin-left: 0;
            padding-left: 0;
          }
        }
        .el-tabs__nav {
          padding-left: 0;
        }
      }
      :deep(.el-table) {
        thead tr th.el-table__cell {
          padding: 12px 0;
        }
      }
    }
  }
}
</style>
